<template>
	<div :class="[config.styles.background=='system'?'titleCommon-system':'']">
		<!--标题文本-->
		<div :class="[config.titleStyle.background=='system'?'rx-dragList-common-system':'']" class="titleStyle" :style="getStyle(config.titleStyle)">
			<div :class="[config.titleStyle.background!='color'?'color-margin':'']" :style="{'font-size':config.titleStyle.fontSize+'px','color':config.titleStyle.titleColor,'text-align':config.titleStyle.textAlign,'font-weight':config.titleStyle.fontWeight}">{{config.title}}</div>
		</div>
	</div>
</template>

<script>
import {Util,TokenUtil} from "@lowcode/jpaas-base-lib";
export default {
	name: "TitleCommon",
	data(){
		return{

		}
	},
	props:['config'],
	methods:{
		getStyle(type){
			if(type.background =='system'){
				//系统自定义
                let img =  import.meta.env.JPAAS_BASE_URL+'/image/background/title' + type.bgImage + '.png';
				const style = {borderImageSource:'url('+img+')'};
				return style;
			}else if(type.background =='custom' && type.customImage) {
				//上传图片
				let img = this.getFilePath(type.customImage)
				const style = {backgroundImage:'url('+img+')'};
				return style;
			}else if(type.background =='color'){
				const style = {background:type.customColor,border:this.initBorder(type),borderRadius:type.borderRadius+'px'};
				return style;
			}else{
				return ''
			}
		},
		initBorder(type){
			if(type.borderOpacity===0){
				return 'nome'
			}else {
				return  type.borderWidth + "px solid " +type.borderColor
			}
		},
		getFilePath(fileId){
      let token = TokenUtil.getToken();
			fileId=Util.encryptWord(fileId);
			return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
		},
	}
}
</script>

<style scoped>
.color-margin{
	margin: -10px;
}
.rx-dragList-common-system{
	width: 100%;
	height: 100%;
	border-image-slice: 10 fill;
	border-width: 10px;
	border-style: solid;
	background-clip: padding-box;
	filter: blur(0px
	);
}
.titleStyle{
	width: 100%;
	height: 50px;
	padding: 0px 20px;
	line-height: 50px;
	color: white;
	font-size: 17px;
	background-position: center;
	background-size:cover;
	background-repeat: no-repeat;
}
.titleCommon-system{
	margin-top: -16px;
}

</style>
